<template>
  <div class="businessLoss-wrapper">
    <section class="add-btn">
      <el-button type="primary" @click="edit('add')" v-if=" !noShow">新增</el-button>
    </section>
    <el-table
      size="mini"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="{
        'background-color': '#eeeeee !important',
      }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="index" label="序号" width="60" align="center">
        <template slot-scope="scope">
          <span>{{
            (page.pageNo - 1) * page.pageSize + scope.$index + 1
          }}</span>
        </template>
      </el-table-column>
        <el-table-column
            prop="computeMethod"
            label="计算方式"
            :show-overflow-tooltip="true"
            min-width="100px"
        >
            <template slot-scope="scope">
                {{$dictUtils.getDictLabel("calcType", scope.row.computeMethod, "") | noValue}}
            </template>

        </el-table-column>
      <el-table-column
        prop="originalLower,originalUpper"
        label="原发数范围"
        :show-overflow-tooltip="true"
        min-width="120px"
      >
        <template slot-scope="scope">
          {{ scope.row.originalLower }}~{{ scope.row.originalUpper }}吨
        </template>
      </el-table-column>

      <el-table-column
        label="路耗标准"
        :show-overflow-tooltip="true"
        min-width="120px"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.computeMethod===1">{{scope.row.allowLossQuantity}} 吨/车</p>
          <p v-else-if="scope.row.computeMethod===2">{{scope.row.allowLossPercent}}%</p>
          <p v-else-if="scope.row.computeMethod===3">{{ scope.row.randomLower }}~{{ scope.row.randomUpper }}吨</p>
          <p v-else>--</p>
        </template>
      </el-table-column>

      <el-table-column
        prop="createBy.loginName"
        label="操作人"
        :show-overflow-tooltip="true"
        min-width="120px"
      >
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="操作时间"
        :show-overflow-tooltip="true"
        min-width="200px"
      >
      </el-table-column>

        <el-table-column prop="state" label="状态" width="110">
            <template slot-scope="scope">
                <section class="activate-state" v-if="scope.row.state===1">
                    <i></i>
                    {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
                </section>
                <section class="inactive-state" v-else>
                    <i></i>
                    {{$dictUtils.getDictLabel("state", scope.row.state, "")}}
                </section>
            </template>
        </el-table-column>
      <el-table-column prop="address" label="操作" width="160px" v-if="!noShow">
        <template slot-scope="scope">
            <template v-for="item in $dictUtils.getDictList('state')">
                <el-link type="primary" v-if="item.value !=='-1'&& item.value!==(scope.row.state+'')" :underline="false" @click="editState(item.value, scope.row)"  :disabled="(scope.row.state===-1&& item.value==='0')||item.value==scope.row.state"
                >{{item.label}}
                </el-link>
            </template>

          <el-link
            v-if="hasPermission('busin:loss:edit')"
            type="primary"
            :underline="false"
            @click="edit('edit',scope.row)"
          >修改</el-link
          >
          <el-link
            v-if="hasPermission('busin:loss:del')"
            type="primary"
            :underline="false"
            @click="delLoss(scope.row.id)"
          >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="page.pageSize"
          :current-page="page.pageNo"
          layout="total,prev,pager, next"
          :total="page.total"
      >
      </el-pagination>
    <el-dialog
      :title="title"
      :visible.sync="innerVisible"
      class="addForm-wrapper"
      :close-on-click-modal="false"
      append-to-body>

      <el-form
        label-width="125px"
        ref="form"
        :model="editForm"
      >
        <!-- oninput="value=value.replace(/[^\d]/g,'')" -->
        <el-form-item label="路耗计算类型:" prop="lossType"
                      :rules="[
                  {required: true, message:'请选择类型', trigger:'change'}
                 ]">
          <el-select clearable v-model="editForm.lossType">
            <el-option
              v-for="item in  $dictUtils.getDictList('lossType')"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="原发数(吨):"  :rules="[
                  {required: true, message:' ',},
                 ]">
          <div class="number-wrapper">
            <div>
              <el-form-item prop='originalLower' :rules="[
                  {required: true, message:'请输入原发数', trigger:'blur'},
                  {validator: validator.isFloat, trigger:'blur'}
                 ]" >
                <el-input-number v-model="editForm.originalLower" :min="0.00" controls-position="right" size="mini" :precision="2" :step="1" ></el-input-number>
              </el-form-item>
            </div>
            <div class="line">～</div>
            <div>
              <el-form-item prop='originalUpper' :rules="[
                  {required: true, message:'请输入原发数', trigger:'blur'},
                  {validator: validator.isFloat, trigger:'blur'}
                 ]">
                <el-input-number v-model="editForm.originalUpper" :min="0.00" :max="maxNumber" controls-position="right" size="mini" :precision="2" :step="1" ></el-input-number>
              </el-form-item>
            </div>
            <el-checkbox @change="changeBasisUpper" v-model="checked">不限</el-checkbox>
          </div>
        </el-form-item>
        <el-form-item label="计算方式:" prop="computeMethod"
                      :rules="[
                  {required: true, message:'请选择类型', trigger:'change'}
                 ]">
          <el-select clearable v-model="editForm.computeMethod">
            <el-option
              v-for="item in  $dictUtils.getDictList('calcType')"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="allowLossQuantity" :rules="[
                  {required: true, message:'请输入合理路耗', trigger:'blur'}
                 ]" label="合理路耗:" v-if="editForm.computeMethod===Number($dictUtils.getDictList('calcType')[0].value)">
            <el-input class="adjustInputAppend" placeholder="请输入路耗" v-model="editForm.allowLossQuantity">
              <span slot="suffix">吨/车</span>
            </el-input>
        </el-form-item>
        <el-form-item prop="allowLossPercent" :rules="[
                  {required: true, message:'请输入路耗百分比', trigger:'blur'}
                 ]" label="合理路耗:" v-if="editForm.computeMethod===Number($dictUtils.getDictList('calcType')[1].value)">

            <el-input class="adjustInputAppend appendLess inputBox" placeholder="请输入路耗百分比" v-model="editForm.allowLossPercent">
              <span slot="suffix">%</span>
            </el-input>

        </el-form-item>
        <el-form-item label="扣重路耗范围:"  :rules="[
                  {required: true, message:' '},
                 ]"   v-if="editForm.computeMethod===Number($dictUtils.getDictList('calcType')[2].value)">
          <div class="number-wrapper random">
            <div>
              <el-form-item prop='randomLower' :rules="[
                  {required: true, message:'请输入随机数下限', trigger:'blur'},
                  {validator: validator.isFloat, trigger:'blur'}
                 ]" >
                <el-input-number v-model="editForm.randomLower" :min="0.00" controls-position="right" size="mini" :precision="2" :step="1" ></el-input-number>
              </el-form-item>
            </div>
            <div class="line" :span="2">～</div>
            <div>
              <el-form-item prop='randomUpper' :rules="[
                  {required: true, message:'请输入随机数上限', trigger:'blur'},
                  {validator: validator.isFloat, trigger:'blur'}
                 ]">
                <el-input-number v-model="editForm.randomUpper" :min="0.00"  controls-position="right" size="mini" :precision="2" :step="1" ></el-input-number>
              </el-form-item>
            </div>
          </div>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
    </el-dialog>
  </div>

</template>
<script>
  import {getLossList, updateLossState, saveLoss, deleteLoss, getModelLossData, getLossInfo} from '@/api/business/business.js'

export default {
  components: {
  },
  data () {
    return {
      noShow:false,
      checked: false,
      innerVisible: false,
      maxNumber: 999.00,
      loading: false,
      title: '路耗设置',
      businessId: '',
      modelId: '',
      page: {
        pageSize: 10,
        pageNo: 1,
        total: 0
      },
      tableData: [],
      editForm: {
        businessId: '',
        lossType: '',
        originalUpper: '',
        originalLower: '',
        computeMethod: '',
        randomLower: '',
        randomUpper: '',
        allowLossQuantity: '',
        allowLossPercent: ''
      }
    }
  },
  methods: {
    changeBasisUpper(){
      this.editForm.originalUpper = this.maxNumber
      this.editForm.originalLower = 0.00
    },
    edit (method, editForm) {
      if (method === 'add') {
        // this.editForm = {}
        getModelLossData({
          modelId: this.modelId
        }).then((res) => {
          if (res.data.code === '200') {
            this.editForm = res.data.result
          }
        })
        this.innerVisible = true
      } else if (method === 'edit') {
        getLossInfo({id: editForm.id}).then((res) => {
          if (res.data.code === '200') {
            this.innerVisible = true
            this.$nextTick(() => {
              this.editForm = {}
              this.editForm.id = res.data.result.id
              this.editForm.businessId = res.data.result.businessId
              this.editForm.lossType = res.data.result.lossType
              this.editForm.originalUpper = res.data.result.originalUpper
              this.editForm.originalLower = res.data.result.originalLower
              this.editForm.computeMethod = res.data.result.computeMethod
              this.editForm.allowLossQuantity = res.data.result.allowLossQuantity
              this.editForm.allowLossPercent = res.data.result.allowLossPercent
            })
            this.title = '编辑路耗'
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
      }
    },
    // 获取列表带分页
    getLossList (businessId, modelId) {
      this.businessId = businessId
      this.modelId = modelId
      this.loading = true
      getLossList({
        businessId: businessId,
          pageSize: this.page.pageSize,
          pageNo: this.page.pageNo
      }).then((res) => {
        if (res.data.code === '200') {
          this.tableData = res.data.result.list;
            this.page.total = res.data.result.count
        }
        this.loading = false
      })
    },

    // 根据模型id获取路耗模型模版设置
    getModelLossData (modelId) {
      console.log(modelId)
      this.loading = true
      getModelLossData({
        modelId: modelId
      }).then((res) => {
        if (res.data.code === '200') {
          this.editForm = res.data.result
        }
      })
    },
    // 删除路耗
    delLoss (id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((res) => {
        deleteLoss({id: id}).then((res) => {
          if (res.data.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getLossList(this.businessId)
          }
        })
      })
    },
    // 新增路耗
    doSubmit () {
      if (this.businessId) {
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.$set(this.editForm, 'businessId', this.businessId)
              saveLoss(this.editForm).then((res) => {
                if (res.data.code === '200') {
                  this.$message({
                    message: '编辑成功',
                    type: 'success'
                  })
                  this.innerVisible = false
                  this.$emit('refreshDataList')
                  this.getLossList(this.businessId)
                }
              })
            }
          })
      } else {
        this.$notify.error({
          title: '错误',
          message: '请选择单条业务数据'
        })
      }
    },
    // 改变产品状态
    editState (event, row) {
      updateLossState({ id: row.id, state: event }).then((res) => {
        if (res.data.code === '200') {
          this.getLossList(this.businessId)
          this.$message({
            type: 'success',
            message: '状态修改成功'
          })
        }
      })
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    close () {
      this.innerVisible = false
    },
      handleSizeChange (e) {
          this.page.pageSize = e
          this.getList(this.businessId, this.modelId)
      },
      handleCurrentChange (e) {
          this.page.pageNo = e
          this.getList(this.businessId, this.modelId)
      }
  },

  mounted () {

  }
}
</script>
<style lang="scss" scoped>
    .addForm-wrapper{
        ::v-deep .el-dialog{
            .el-input__inner{
                width: 320px;
            }
            .el-form-item__content .number-wrapper.random .el-input-number{
                width: 148px !important;
                .el-input__inner{
                    min-width: 148px !important;
                }
            }
        }
    }
</style>
